<template>
  <div class="retrieval">
    <div class="r-top">
      <!-- <div class="rt-search">
          <el-select v-model="selectValue" placeholder="请输入检索条件" size="large">
            <el-option label="知识库检索" value="1" />
            <el-option label="时空检索" value="2" />
          </el-select>
          <el-date-picker v-model="inputSearch" type="daterange" range-separator="To" start-placeholder="请输入起始时间"
            end-placeholder="请输入终止时间" size="large" />
          <el-button @click="handleSearch" type="primary" color="#f5f7fa">搜索</el-button>
        </div> -->
    </div>
    <div class="r-bottom">
      <el-timeline style="width: 600px">
        <el-timeline-item
          v-for="(item, index) in tableModule.tableData"
          :key="index"
          :timestamp="dayjs(item.eventDateTime).format('YYYY/MM/DD')"
          placement="top"
        >
          <el-card>
            <!--              <h4>{{ item.graphName }}</h4>-->
            <h4>{{ item.eventName }}</h4>
            <p
              >{{ item.desc }} {{ dayjs(item.eventDateTime).format('YYYY/MM/DD') }}-{{
                dayjs(item.createTime).format('YYYY/MM/DD')
              }}</p
            >
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script setup lang="tsx">
import * as FormApi from '@/api/knowledge/character'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { getGraphEventPageByTimeInitialize } from '@/api/knowledge/character'

const route = useRoute()
const router = useRouter()
const selectValue = ref<string>('2')
const tableModule = reactive({
  tableData: [], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})
// const inputSearch = ref()
const props = defineProps({
  inputSearch: String
})
// props.inputSearch = route.query.inputSearch || ''
const handleSearch = () => {
  // if (selectValue.value === '1')
  // router.push({
  //   path: '/knowledge/character',
  //   query: { graphId: route.query.graphId, inputSearch: '' }
  // })
  // else if (selectValue.value === '2') {
  // router.push({
  //   path: '/knowledge/character/retrieval',
  //   query: { graphId: route.query.graphId, inputSearch: props.inputSearch }
  // })
  // console.log(props.inputSearch)
  const params = {
    graphId: route.query.graphId,
    // queryTimeStart: dayjs('1925-01-01').format("YYYY/MM/DD"),
    // queryTimeEnd: dayjs('2024-07-17').format("YYYY/MM/DD"),
    queryTimeStart: dayjs(props.inputSearch[0]).format('YYYY/MM/DD'),
    queryTimeEnd: dayjs(props.inputSearch[1]).format('YYYY/MM/DD'),
    pageNo: tableModule.currentPage,
    pageSize: tableModule.pageSize
  }
  FormApi.getGraphEventPageByTime(params).then((res) => {
    const resList = res.list
    res.list = resList.sort(
      (a, b) => new Date(b.eventDateTime).getTime() - new Date(a.eventDateTime).getTime()
    )
    // res.list = resList.sort()
    tableModule.tableData = res.list
    tableModule.count = res.total
  })
  // }
}

const handleSearchInitialize = () => {
  const params = {
    graphId: route.query.graphId,
    pageNo: tableModule.currentPage,
    pageSize: tableModule.pageSize
  }
  FormApi.getGraphEventPageByTimeInitialize(params).then((res) => {
    const resList = res.list
    res.list = resList.sort(
      (a, b) => new Date(b.eventDateTime).getTime() - new Date(a.eventDateTime).getTime()
    )
    // res.list = resList.sort()
    tableModule.tableData = res.list
    tableModule.count = res.total
  })
  // }
}
defineExpose({ handleSearch })
onMounted(() => {
  handleSearchInitialize()
})
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.retrieval {
  display: flex;
  flex-direction: column;
  align-items: center;

  .r-top {
    .rt-search {
      display: flex;
      justify-content: center;
      align-items: center;

      ::v-deep(.el-select) {
        width: 150px;
        // background-color: #f5f7fa !important;
        background-color: grey !important;

        .el-input__wrapper {
          border-radius: 0 !important;
        }
      }

      ::v-deep(.el-date-editor) {
        width: 570px;
        border-radius: 0 !important;
      }

      ::v-deep(.el-button) {
        width: 60px;
        height: 40px;
        border-radius: 0 !important;

        span {
          color: grey !important;
        }
      }
    }
  }

  .r-bottom {
    min-height: 500px;
  }
}
</style>
